<template>
  <div class="my-edit-page">
    <div class="my-nav-cs my-edit-page-nav">
      <div class="my-edit-page-nav-title fl">我的资料</div>
      <div class="my-edit-page-nav-oper fr"><span @click="enableEdit" class="space-btn">编辑</span></div>
      <div class="cf"></div>
    </div>
    <div class="my-edit-page-content">
      <span @click="enableEdit" class="my-edit-m-btn">编辑</span>
      <ul>
        <li><label>头像</label><span><img class="my-edit-pic" src="/default-photo.jpg" width="40" height="40"/></span>
        </li>
        <li><label>昵称</label><span><input :disabled="enable" class="my-edit-input" placeholder="请输入昵称"/></span></li>
        <li><label>昵称</label><span><input :disabled="enable" type="radio" name="sex"/>男<input name="sex" :disabled="enable"
                                                                                  type="radio"/>女</span></li>
        <li><label>手机</label><span><input :disabled="enable" class="my-edit-input" placeholder="请绑定手机"/></span></li>
        <li><label>邮箱</label><span><input :disabled="enable" class="my-edit-input" placeholder="请绑定邮箱"/></span></li>
        <li><label>微信</label><span><input :disabled="enable" class="my-edit-input" placeholder="请绑定微信"/></span></li>
        <li><label>Q  Q</label><span><input :disabled="enable" class="my-edit-input" placeholder="请绑定QQ"/></span></li>
      </ul>
      <div class="my-edit-save-btn">
        <span class="btn" @click="editSave">保存</span>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        enable: true
      }
    },
    methods: {
      enableEdit () {
        this.enable = false
      },
      editSave () {
        this.enable = true
      }
    },
    computed: {}
  }
</script>
<style>
  .my-edit-save-btn{
    width: 100%;
    text-align: center;
    margin-bottom: 50px;
    margin-top: 20px;
  }
  .my-edit-save-btn .btn{
    width: 100px;
  }
  .my-edit-m-btn{
    position: fixed;
    top: 10px;
    right: 10px;
    color: #13BA31;
    display: none;
  }
  .my-edit-page-content li {
    height: 80px;
    line-height: 80px;
  }

  input:disabled {
    background-color: #ffffff;
  }

  .my-edit-page-content li label {
    width: 15%;
    text-align: right;
    padding-right: 5%;
    display: inline-block;
    font-weight: 700;
    font-size: 1.25em;
  }

  .my-edit-pic {
    vertical-align: middle;
  }

  .my-edit-page-content li span {
    width: 80%;
    text-align: left;
    display: inline-block;
  }

  .my-edit-page-content li span .my-edit-input {
    width: 99%;
    outline: none;
    border: none;
    height: 40px;
    padding-left: 1%;
  }

  .my-edit-page-content li span input:focus {
    border-bottom: 1px solid #13BA31;
  }

  .my-nav-cs {
    border-bottom: 1px solid #f3f3f3;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 1.25em;
    font-weight: 600;
  }

  @media all and (max-width: 766px) {
    .my-nav-cs {
      display: none;
    }

    .my-edit-page-content li {
      height: 50px;
      line-height: 50px;
    }

    .my-edit-page-content li label {
      font-size: 0.9em;
    }
    .my-edit-m-btn{
      display: block;
    }
    .my-edit-save-btn .btn{
      width: 80%;
    }
  }
</style>
